<template>
	<view>
		<div class="navbar-wrap">
			<div class="img-bg">
				<image src="../../pagesUser/static/wallet-bg.png" mode=""></image>
			</div>

			<div class="statusBarHeight" :style="{height: statusBarHeight + 'px'}"></div>

			<div class="navbar" :style="{top: statusBarHeight + 'px'}">
				<uni-icons @click="handleGoBack" class="back-icon" type="arrowleft" size="28" color="#fff"></uni-icons>
				<!-- #ifndef MP-WEIXIN -->
				<div class="c-tit">钱包</div>
				<!-- #endif -->
			</div>

			<view class="navbar_content" :style="{paddingTop: statusBarHeight+44+'px'}">
				<text class="tit">当前余额</text>
				<text class="price">{{balanceObj.totalBalance}}</text>
				<view class="classify">
					<view class="wallet cal">
						<text>钱包余额</text>
						<text class="num">{{balanceObj.balance}}</text>
					</view>
					<view class="commossion cal">
						<text>佣金余额</text>
						<text class="num">{{balanceObj.commossionBalance}}</text>
					</view>
				</view>
				<view class="btns">
					<view class="btn" @click="handleGoRechargeAndWithdraw('会员充值')">会员充值</view>
					<view class="btn withdraw" @click="handleGoRechargeAndWithdraw('佣金转出')">佣金转出</view>
					<view class="btn withdraw" @click="handleGoRechargeAndWithdraw('佣金提现')">佣金提现</view>
				</view>
			</view>


		</div>
	</view>
</template>

<script>
	import amap from '@/utils/amap-wx.js';
	export default {
		props: {
			balanceObj: {
				type: Object,
				default () {
					return {
						balance: 0, // 账户钱包余额
						commossionBalance: 0, // 佣金余额
						totalBalance: 0, // 总余额
					}
				}
			}
		},
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
			};
		},
		created() {
			console.log('balanceObj', this.balanceObj);
		},
		methods: {
			handleGoBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			handleGoRechargeAndWithdraw(tit) {
				uni.navigateTo({
					url: '/pagesUser/rechargeAndWithdraw?tit=' + tit
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navbar-wrap {
		position: relative;
		padding-bottom: 149rpx;

		.img-bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: -1;
		}

		.navbar {
			position: absolute;
			left: 0;
			right: 0;
			height: 88rpx;
			line-height: 88rpx;
			justify-content: space-evenly;
			text-align: center;
			color: #fff;
			font-size: 36rpx;

			.back-icon {
				position: absolute;
				left: 30rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		.navbar_content {
			display: flex;
			flex-direction: column;
			align-items: center;
			color: #fff;

			.tit {
				font-size: 26rpx;
			}

			.price {
				font-size: 88rpx;
				line-height: 1;
				font-weight: 500;
				padding: 20rpx 0 69rpx;
			}

			.classify {
				display: flex;
				justify-content: space-around;
				width: 100%;
				margin-bottom: 30rpx;
				position: relative;

				// &::before {
				// 	content: '';
				// 	width: 2rpx;
				// 	height: 68rpx;
				// 	background-color: #fff;
				// 	position: absolute;
				// 	top: 50%;
				// 	left: 50%;
				// 	transform: translate(-50%, -50%);
				// }

				.cal {
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 26rpx;

					.num {
						font-size: 52rpx;
						margin-top: 10rpx;
					}
				}
			}

			.btns {
				display: flex;
				align-items: center;

				.btn {
					width: 188rpx;
					height: 72rpx;
					line-height: 72rpx;
					text-align: center;
					border: 1px solid #fff;
					border-radius: 36rpx;
					font-size: 32rpx;
					font-weight: bold;

					&.withdraw {
						margin-left: 40rpx;
						background-color: #fff;
						color: $blue;
					}
				}
			}
		}


	}
</style>
